<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .item {
        padding: 10px;
        display: flex;
        border-bottom: 1px solid #000;
      }

      .item-label {
        /* 表示不允许被收缩 */
        flex-shrink: 0;
        width: 100px;
        display: block;
        text-align: right;
      }
    </style>
  </head>
  <body>
    <!-- 
    表单数据绑定： v-model 指令的使用
      v-model 实现了数据的双向绑定，那么如何实现的？
        1. 数据 -> 页面
                        最底层的 Vue 响应式原理来实现
        2. 页面 -> 数据
                        绑定了相关的事件，在事件处理函数中修改了数据

      v-model 是个语法糖，他的展开形式如下：
        v-model="username"
        :value="username"  @input="username = $event.target.value"


   -->
    <div id="app">
      <input type="text" :value="username" @input="handleInput" />

      <div class="item">
        <label class="item-label">用户名：</label>
        <div class="item-content">
          <input type="text" v-model="username" />
        </div>
      </div>

      <div class="item">
        <label class="item-label">密码：</label>
        <div class="item-content">
          <input type="password" v-model="password" />
        </div>
      </div>

      <div class="item">
        <label class="item-label">性别：</label>
        <div class="item-content">
          <!-- 
            以往需要对多个radio元素做成一组的话，需要设置同名的name属性值
            在Vue中只需要让多个 radio 元素 v-model 绑定同一个数据，那么他们就是一组的
           -->
          <label>
            <input type="radio" v-model="grader" value="1" />
            <span>男</span>
          </label>
          <label>
            <input type="radio" v-model="grader" value="2" />
            <span>女</span>
          </label>
        </div>
      </div>

      <div class="item">
        <label class="item-label">爱好：</label>
        <div class="item-content">
          <label>
            <input type="checkbox" v-model="likeFruits" value="Apple" />
            <span>Apple</span>
          </label>
          <label>
            <input type="checkbox" v-model="likeFruits" value="Banana" />
            <span>Banana</span>
          </label>
          <label>
            <input type="checkbox" v-model="likeFruits" value="Orange" />
            <span>Orange</span>
          </label>
        </div>
      </div>

      <div class="item">
        <label class="item-label">协议：</label>
        <div class="item-content">
          <!-- 
            单个 checkbox 需要的数据格式，就是一个 boolean 类型
            
            可以设置 true-value 与 false-value 两个特殊的属性来控制 勾选与未勾选的值
           -->
          <label>
            <input
              type="checkbox"
              v-model="flag"
              true-value="yes"
              false-value="no"
            />
            <span>用户隐私协议</span>
          </label>
        </div>
      </div>

      <div class="item">
        <label class="item-label">当前居住地：</label>
        <div class="item-content">
          <select v-model="selectCityId">
            <option disabled value="">请选择</option>
            <option v-for="city in citys" :value="city.id">
              {{ city.name }}
            </option>
          </select>
        </div>
      </div>

      <div class="item">
        <label class="item-label">备注：</label>
        <div class="item-content">
          <textarea v-model="remark"></textarea>
        </div>
      </div>

      <div class="item">
        <button @click="handleReg">注册</button>
      </div>
    </div>

    <script src="../lib/vue-3.js"></script>
    <script>
      const { createApp } = Vue;

      const app = createApp({
        data() {
          return {
            username: "admin",
            password: "123456",
            grader: 2, // 1 - 男  2 - 女
            likeFruits: ["Apple", "Banana"], // 喜欢的水果集合
            flag: "yes", // 是否同意协议

            // 城市数组
            citys: [
              { id: "1000", name: "北京市" },
              { id: "2000", name: "上海市" },
              { id: "3000", name: "广州市" },
              { id: "4000", name: "深圳市" },
            ],
            // 当前选择的城市Id
            selectCityId: "4000",

            // 备注
            remark: "一个帅小伙",
          };
        },

        methods: {
          handleReg() {
            console.log(this.username);
            console.log(this.password);
            console.log(this.grader);
            console.log(this.likeFruits);

            // 调用接口
            fetch(rul, {
              // 后端要的flag字段的值为 yes / no
              flag: this.flag ? "yes" : "no",
            });
          },

          handleInput(event) {
            // console.log("event", event); // 事件对象
            // console.log(event.target) // DOM对象
            console.log(event.target.value); // 输入的值

            this.username = event.target.value;
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
